<template>
  <el-container class="analysis-container">
    <el-aside class="layer-thumbnail-container" width="363px">
      <OCTLayerThumbnailList :timeStamp="timeStamp" :layers="thumbnailList" />
    </el-aside>
    <el-container>
      <el-container>
        <el-main class="angio-images-container">
          <MainImages />
        </el-main>
        <el-aside class="image-setting-container" width="219px">
          <ImageSettingsPanel />
        </el-aside>
      </el-container>
      <el-footer class="image-action-container" height="36px">
        <ImageActions
          :showNavigation="true"
          :showLayerOnBscan="true"
          :showLayerEdit="true"
          @change="handleChange"
        />
      </el-footer>
    </el-container>
  </el-container>
  <EditLayerDialog
    :dlgVisible="editLayersStore.showEditLayerDig"
    :bscan-type="ContainerNameEnum.OctSlowBscan"
    @closeDig="handleCloseEditLayerDig"
  />
</template>

<script setup lang="ts">
import { useBeforeRouteLeave } from "@/hooks/useBeforeRouteLeave";
import ImageActions from "@/views/analysis/components/ImageActions.vue";
import {
  StructuralProj_THUMBNAIL_LIST,
  AS_StructuralProj_THUMBNAIL_LIST
} from "@/utils/constant";
import OCTLayerThumbnailList from "./components/OCTLayerThumbnailList.vue";
import MainImages from "./components/MainImages.vue";
import ImageSettingsPanel from "./components/ImageSettingsPanel.vue";
import { useAnalysisCommonStoreHook } from "@/views/analysis/store/analysisCommon";
import { useStructuralProjStoreHook } from "./store";
import { ImageActionEnum, ContainerNameEnum } from "@/enums";
import { useImageActions } from "@/hooks/useImageActions";
import EditLayerDialog from "@/views/analysis/components/layers/components/EditLayerDialog.vue";
import { useEditLayersStoreHook } from "@/views/analysis/components/layers/store/editLayers";
import { useResizeObserver } from "@/hooks/useResizeObserver";
import { useMeasureCommonStore } from "@/views/analysis/store/measureCommon";
import { freeMemeory } from "@/utils/tools/segmentation";
import { initResizeObserver } from "@/utils/autoResize/index";

const { handleNavLineVisible, handleLayerVisible } = useImageActions();

const timeStamp = ref<number>(0);
const analysisCommonStore = useAnalysisCommonStoreHook();
const editLayersStore = useEditLayersStoreHook();
const structuralProjStore = useStructuralProjStoreHook();
const measureCommonStore = useMeasureCommonStore();
useResizeObserver();

// 获取基本图像参数,通过设定await 为
// 激活异步组件 Suspense,所有的数据必须等到拿到初始化数据后才能加载血流主页面
await analysisCommonStore.initPageInfo();
await structuralProjStore.getOctLayers();
await measureCommonStore.getMeasureData();
structuralProjStore.setProjType();

const thumbnailList = computed(() =>
  structuralProjStore.isAs
    ? AS_StructuralProj_THUMBNAIL_LIST
    : StructuralProj_THUMBNAIL_LIST
);

const operationMaps: Operation = {
  [ImageActionEnum.Navigation]: handleNavLineVisible,
  [ImageActionEnum.LayerOnBscan]: handleLayerVisible
};
// image action change
const handleChange = (type: string, status: boolean) => {
  if (type === ImageActionEnum.LayerEdit) {
    editLayersStore.setEditLayerDigVisible(true);
  } else {
    operationMaps[type](status);
  }
};

// edit layer
const handleCloseEditLayerDig = () => {
  editLayersStore.setEditLayerDigVisible(false);
  // 是否需要更新血流页面
};

structuralProjStore.$onAction(
  ({
    name, //action 函数的名称
    args, //action 函数参数数组
    after //钩子函数，在action函数执行完成返回或者resolves后执行
  }) => {
    after(() => {
      if (["updateLayer", "resetOctLayer"].includes(name)) {
        timeStamp.value = new Date().getTime(); // 创建一个表示当前时间的 时间戳
      }
    });
  },
  false //默认是false，设置为true的时候，组件卸载时，订阅依然有效
);

onUnmounted(() => {
  structuralProjStore.$reset();
  freeMemeory();
});

onBeforeMount(() => {
  initResizeObserver();
});

useBeforeRouteLeave();
</script>

<style lang="scss" scoped>
* {
  user-select: none;
}

.analysis-container {
  overflow: hidden;

  .layer-thumbnail-container {
    display: flex;
    padding: 16px 0 0 13px;
    border-right: 1px solid $divide-dark-color;
  }

  .image-action-container {
    padding: 0 5px;
    background-color: $image-bg-color;
    border-top: 1px solid $divide-light-color;
  }

  .image-setting-container {
    border-left: 1px solid $divide-dark-color;
  }

  .angio-images-container {
    padding: 0 5px;
  }
}
</style>
